import Axios from 'axios'

// import axios from 'axios'

export default {
  data () {
    return {
      userList: [],
      pagenum: 1,
      total: 0,
      searchText: '',
      temp: true,
      dialogAddUserVisible: false,
      userForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      rules: {
        username: [
          // 如果内容一个都不填
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 如果内容格式不正确
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          // 如果内容一个都不填
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 如果内容格式不正确
          {
            min: 6,
            max: 10,
            message: '密码长度在 6 到 10 个字符',
            trigger: 'blur'
          }
        ],
        email: [
          {
            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: '格式不正常',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            pattern: /^1(3|4|5|7|8)\d{9}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.MLLoadUserList(this.pagenum)
  },
  methods: {
    /**
     * 加载数据
     */
    async MLLoadUserList (pagenum = 1, searchText = '') {
      const options = {
        params: {
          query: searchText,
          pagenum,
          pagesize: 2
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }
      const res = await this.$axios.get('users', options)
      this.userList = res.data.data.users
      // 总数
      this.total = res.data.data.total

      this.pagenum = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query: searchText,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      //     // console.log(res)
      //     this.userList = res.data.data.users

      //     // 总数
      //     this.total = res.data.data.total
      //   })
    },

    /**
     * 页面改变
     */
    currentChange (cur) {
      console.log(cur)
      this.MLLoadUserList(cur, this.searchText)
    },
    /**
     * 开始搜搜
     */
    startSearch () {
      this.MLLoadUserList(1, this.searchText)
    },
    /**
     * 删除用户
     */
    async delUser (id) {
      console.log(id)

      try {
        // 咨询确定要删除吗?
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 删除文件吗?
        await this.$axios.delete(
          `http://localhost:8888/api/private/v1/users/${id}`,
          {
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }
        )

        // 刷新页面
        this.MLLoadUserList(1)

        // 提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }

      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     })
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     })
      //   })

      // const res = await axios.delete(
      //   `http://localhost:8888/api/private/v1/users/${id}`,
      //   {
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   }
      // )
      // console.log(res)
      // if (res.data.meta.status === 200) {

      // }
    },
    /**
     * 修改 状态
     */
    async changeState (row) {
      const { id, mg_state: mgState } = row

      await this.$axios.put(`/users/${id}/state/${mgState}`, null)
    },
    /**
     * 显示添加用户
     */
    showAddUserDialog () {
      this.dialogAddUserVisible = true
    },
    /**
     * 添加用户
     */
    async addUser () {
      // 校验

      try {
        // 校验
        await this.$refs.userForm.validate()

        // 添加
        await Axios.post('/users', this.userForm)

        // 添加完,弹唱小时,提示添加成功
        this.dialogAddUserVisible = false

        this.MLLoadUserList(1)

        this.$message({
          message: '添加用户成功',
          type: 'success'
        })
      } catch (error) {
        console.log('校验失败')
      }

      // this.$refs.userForm.validate(valid => {
      //   if (!valid) {
      //     console.log('错误信息')

      //     return
      //   }
      //   console.log(valid)

      //   // const res = await this.$axios.post('/users', this.userForm)

      //   // console.log(res)
      // })
    },
    /**
     * 关闭对话框
     */
    closeDialog () {
      this.$refs.userForm.resetFields()
    }
  }
}
